<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2024-06-06 13:53:51
 * @LastEditTime: 2024-07-09 16:20:03
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 
 * @FilePath: \chu-meng\client\src\pages\Design\components\DesignArea\index.vue
 * Copyright 版权声明
-->
<template>
  <div class="modWrap">
    <a-tabs v-model:activeKey="activeKey" type="card">
      <a-tab-pane v-for="item in fileList" :key="item.value">
        <template #tab>
          <div class="fileTab">
            <FileOutlined />
            <span class="label">{{ item.label }}</span>
            <CloseOutlined />
          </div>
        </template>
        <div class="handleArea">
          <a-space>
            <!-- <a-button type="primary" size="small">
              画布
            </a-button> -->
            <a-button type="default" size="small">
              代码
            </a-button>
          </a-space>
        </div>
        <!-- 画布 -->
        <!-- <DrawingBoard></DrawingBoard> -->
        <!-- 拖拽设计区 -->
        <DragDesignArea ref="DragDesignAreaRef"></DragDesignArea>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup>
import {
  FileOutlined,
  CloseOutlined
} from '@ant-design/icons-vue'
// // 画布
// import DrawingBoard from './DrawingBoard/index.vue'
// 拖拽设计区
import DragDesignArea from './DragDesignArea/index.vue'
import { ref } from 'vue'

const fileList = ref([
  {
    label: '首页',
    value: '1'
  },
  {
    label: '用户管理',
    value: '2'
  },
  {
    label: '测试页面',
    value: '3'
  },
  {
    label: '专业页',
    value: '4'
  }
])

const activeKey = ref('1')

</script>

<style lang="scss" scoped>
.modWrap{
  :deep(.ant-tabs-nav-wrap) {
    .ant-tabs-nav-list{
      width: 100%;
      flex: 1;
      .ant-tabs-tab{
        margin: 0;
        padding: 8px 8px;
        border-radius: 0;
        border-top: 0;
        text-align: center;
        .fileTab{
          .anticon{
            margin-right: 0;
          }
          .label{
            font-size: 12px;
            margin: 0 4px;
          }
        }
      }
    }
  }
  :deep(.ant-tabs-nav) {
    margin-bottom: 0;
  }
  .handleArea{
    padding: 8px 24px;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
  }
}
</style>
